<!--  -->
<template>
  <div class="padding20 applyResources" ref="">
    <div class="buttonList" style="border-bottom: 1px solid gray">
      <el-checkbox-group v-model="buttonValue" @change="buttonValueChange">
        <el-checkbox-button label="数据资源"></el-checkbox-button>
        <el-checkbox-button label="模型资源"></el-checkbox-button>
        <el-checkbox-button label="工具资源"></el-checkbox-button>
        <el-checkbox-button label="硬件资源"></el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div class="search">
      <FormSearch
        ref="searchFrom"
        :formItem="searchItem"
        :formData.sync="searchData"
        :buttonList="buttonAll.searchList"
        @clearForm="clearForm"
        @searchData="search"
      />
    </div>
    <div v-if="id" style="margin-bottom: 10px">
      <el-button type="primary" @click="upDateRe()">更新资源</el-button>
    </div>
    <div class="content">
      <div
        style="
          border: 1px solid #bae7ff;
          background-color: #e6f7ff;
          padding: 5px;
          margin-bottom: 10px;
        "
      >
        <i
          class="el-icon-info"
          style="color: #409eff; margin-left: 10px; margin-right: 10px"
        ></i
        >已申请<span style="">{{ multiSelection.length }}</span
        >项资源 数量已根据拓扑图套数计算
        <el-button type="text" @click="title = '资源申请列表'"
          >查看详情</el-button
        >
      </div>
      <Table
        :list="tableData"
        :title-list="titleList"
        :selection="true"
        :action-list="buttonAll.actionList"
        @action="action"
        @SelectionChange="handleSelection"
        :rowClassName="rowClassNameFn"
      >
        <template
          v-slot:[it.prop]="prop"
          v-for="(it, index) in titleList.filter((it) => it.slot)"
        >
          <span :key="index">
            <span v-if="it.prop == 'count'">
              <!-- <span type='text' style="margin-right:20px;color: rgb(64, 158, 255)">申请</span> -->
              <el-input-number
                v-model="prop.data[it.prop]"
                size="small"
                :min="1"
              >
              </el-input-number>
            </span>
            <span :key="index" v-if="it.prop == 'index'">
              {{ prop.index + (searchData.current - 1) * searchData.size + 1 }}
            </span>
          </span>
        </template>
      </Table>
      <Pagination
        :limit.sync="searchData.pageSize"
        :page.sync="searchData.currentPage"
        :total-num="total"
        class="pagePart"
        @pagechange="updataPage"
      />
      <DialogView
        v-if="title"
        style="margin-left: 20%"
        :title-text="title"
        :appendToBody="true"
        :btnShow="false"
        width-num="70%"
        @close="title = ''"
      >
        <template v-slot:main>
          <div class="margintb">
            <div>数据资源</div>
            <Table
              :list="multiSelection.filter((it) => it.resType == 1)"
              :title-list="choseTitleList"
            >
              <template
                v-slot:[it.prop]="prop"
                v-for="(it, index) in titleList.filter((it) => it.slot)"
              >
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{ prop.index + 1 }}
                  </span>
                </span>
              </template>
            </Table>
          </div>
          <div class="margintb">
            <div>模型资源</div>
            <Table
              class="margintb"
              :list="multiSelection.filter((it) => it.resType == 2)"
              :title-list="choseTitleList"
            >
              <template
                v-slot:[it.prop]="prop"
                v-for="(it, index) in titleList.filter((it) => it.slot)"
              >
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{ prop.index + 1 }}
                  </span>
                </span>
              </template>
            </Table>
          </div>
          <div class="margintb">
            <div>工具资源</div>
            <Table
              class="margintb"
              :list="multiSelection.filter((it) => it.resType == 2)"
              :title-list="choseTitleList"
            >
              <template
                v-slot:[it.prop]="prop"
                v-for="(it, index) in titleList.filter((it) => it.slot)"
              >
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{ prop.index + 1 }}
                  </span>
                </span>
              </template>
            </Table>
          </div>
          <div class="margintb">
            <div>硬件资源</div>
            <Table
              class="margintb"
              :list="multiSelection.filter((it) => it.resType == 3)"
              :title-list="choseTitleList"
            >
              <template
                v-slot:[it.prop]="prop"
                v-for="(it, index) in titleList.filter((it) => it.slot)"
              >
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{ prop.index + 1 }}
                  </span>
                </span>
              </template>
            </Table>
          </div>
        </template>
      </DialogView>
    </div>
  </div>
</template>

<script>
import util from "../api/util.js";
import experApi from "../api/exper.service";
export default {
  components: {},
  data() {
    return {
      buttonValue: ["数据资源"],
      ...util.getResource(),
      originTitleList: [],
      total: 0,
      multiSelection: [],
      title: "",
      id: null,
    };
  },
  mounted() {
    this.originTitleList = this.titleList;
    this.id = this.$route.query.id;
    this.getPage("dataPage");
    // this.experType()
  },
  computed: {},
  watch: {},
  methods: {
    rowClassNameFn({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "grayLine";
      }
    },
    async experType() {
      let { data } = await experApi.experType();
      this.searchItem.find((it) => it.prop == "type").list = data.map((it) => {
        return {
          label: it.label,
          id: it.value,
        };
      });
    },
    async upDateRe() {
      // if(this.)
      if (this.multiSelection.length) {
        let resourceData = this.multiSelection.map((it) => {
          return {
            name: it.name,
            resType: it.resType,
            resId: it.id,
            count: it.count,
            expId: this.id,
          };
        });
        let data = await experApi.updateResult({ resourceData: resourceData });
        if ((data.code = 10200)) {
          this.$message.success("更新资源成功");
          this.multiSelection = [];
        }
      } else {
        this.$message.info("请先选择资源");
      }
    },
    // updat updateResult
    // 操作页码
    updataPage(it) {
      this.searchData.current = it.page;
      this.searchData.size = it.limit;
      this.getDataByButton();
    },
    buttonValueChange(val) {
      this.buttonValue = [val.pop()];
      this.getDataByButton();
    },
    getDataByButton() {
      switch (this.buttonValue[0]) {
        case "数据资源":
          this.titleList = this.originTitleList;
          this.getPage("dataPage");
          break;
        case "模型资源":
          this.titleList = this.moduleTitleList;
          this.getPage("modelPage", 1);
          break;
        case "工具资源":
          // this.titleList = this.moduleTitleList;
          this.titleList = this.toolTitleList;
          this.getPage("modelPage", 2);
          break;
        case "硬件资源":
          this.titleList = this.hardTitleList;
          this.getPage("hardPage");
          break;
      }
    },
    search() {
      this.getDataByButton();
    },
    clearForm() {
      this.$refs.searchFrom.$refs.formSearch.resetFields();
      this.getDataByButton();
    },
    async getPage(url, type) {
      this.searchData.resType = type;
      if(url == 'dataPage'){
        this.searchData.resType = 1;
      }
      let { data } = await experApi[url](this.searchData);
      this.tableData = data.records;
      this.total = data.total;
    },
    apply(data) {
      // console.log(data, "dd");
    },
    handleSelection(val) {
      // console.log(val, "vv");
      this.multiSelection = val;
      this.dataList = this.multiSelection.filter((it) => it.resType == 1);
      this.modelList = this.multiSelection.filter((it) => it.resType == 2);
      this.hardList = this.multiSelection.filter((it) => it.resType == 3);
    },
    // 查看详情
    checkDetai() {},
  },
  created() {},
};
</script>
<style >
.el-table .grayLine {
  background: #eee;
}
</style>
